* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
/*******************box*******************/
.box {
    position: relative;
    height: 100%;
    background: url(../images/f1_1.jpg) no-repeat center;
    background-size: cover;
}
.box>div,
.box>img {
    position: absolute;
    display: block;
    left: 50%;
}
/*******************云 cloud *******************/

.box>div:first-child {
    margin-top: 30px;
    margin-left: -15%;
    width: 66px;
    height: 41px;
    background-image: url(../images/yun1.png);
    animation: cloud 1s linear infinite alternate;
}
.box>div:nth-child(2) {
    margin-top: 130px;
    margin-left: 25%;
    width: 85px;
    height: 44px;
    background-image: url(../images/yun2.png);
    animation: cloud 1s linear infinite .4s alternate;
}
.box>div:nth-child(3) {
    margin-top: 200px;
    margin-left: -35%;
    width: 126px;
    height: 72px;
    background-image: url(../images/yun3.png);
    animation: cloud 1s linear infinite .8s alternate;
}
/*******************气球 balloon *******************/
.box>div:nth-child(n+4) {
    transform-origin: center bottom;
    z-index: 1;
    margin-top: 510px;
    width: 134px;
    height: 168px;
}
.box>div:nth-child(4) {
    animation: balloon 1s linear infinite alternate;
    margin-left: -432px;
}
.box>div:nth-child(5) {
    animation: balloon 1s linear infinite .2s alternate;
    margin-left: -194px;
}
.box>div:nth-child(6) {
    animation: balloon 1s linear infinite .5s alternate;
    margin-left: 46px;
}
.box>div:nth-child(7) {
    animation: balloon 1s linear infinite .9s alternate;
    margin-left: 284px;
}
/*******************鹿 giraffe *******************/
.box>img:nth-child(8) {
    margin-top: 138px;
    margin-left: 185px;
    transform-origin: 0 100%;
    animation: giraffe 2s linear infinite;
}
/*******************热气球 hotBalloon *******************/
.box>img:nth-child(9) {
    margin-top: 20px;
    margin-left: 0px;
    transform-origin: 0 100%;
    animation: hotBalloon 1s linear infinite .5s alternate;
}
/*******************标题 title *******************/
.box>img:nth-child(10) {
    margin-top: 219px;
    margin-left: -370px;
    transform-origin: 0 100%;
    animation: title 1s linear infinite alternate;
}
/*******************keyframes*******************/
@keyframes cloud {
    to {
        transform: translate(30%);
    }
}
@keyframes balloon {
    0% {
        transform: rotate(10deg) translateY(-20%) scale(1,1.1);
    }
    50% {
        transform: translateY(0);
    }
    100% {
        transform: rotate(-10deg) translateY(-20%) scale(1,1.1);
    }
}
@keyframes giraffe {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-10deg) scale(1, 1.1);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes hotBalloon {
    to {
        transform: scale(1.1) translate(10px,10px);
    }
}
@keyframes title {
    to {
        transform: scale(1.1);
    }
}